<template>
    <div class="add-order">
        <div class="tles"> 亲友信息 </div>
        <div class="ltst">
            <ul>
                <li class="clearfix">
                    <p class="fl">姓名</p>
                    <input type="text" placeholder="请输入姓名" v-model="queryParam.touristName" @blur="nameBlur()" maxlength="8">
                </li>
                <li class="clearfix">
                    <p class="fl">手机号</p>
                    <input type="text" placeholder="请输入手机号码" v-model="queryParam.phoneNum" @blur="phoneBlur()" maxlength="11">
                </li>
                <li class="clearfix">
                    <p class="fl">身份证</p>
                    <input type="text" placeholder="请输入您的身份证" v-model="queryParam.idCardNum" @blur="idCardBlur()" maxlength="18">
                </li>
                <li class="clearfix">
                    <p class="fl">护照</p>
                    <input type="text" placeholder="请输入您的护照" v-model="queryParam.passPortNum">
                </li>
                <li class="clearfix">
                    <p class="fl">详细地址</p>
                    <input type="text" placeholder="请输入您的地址" v-model="queryParam.contactAddress">
                </li>
                <li class="clearfix">
                    <p class="fl">邮编</p>
                    <input type="text" placeholder="请填写邮编" v-model="queryParam.postcode">
                </li>
            </ul>
            <div class="type clearfix">
                <p class="fl" @click="queryParam.touristType='adult'" :class="{'currt':queryParam.touristType=='adult'}">成人</p>
                <p class="fl" @click="queryParam.touristType='child'" :class="{'currt':queryParam.touristType=='child'}">儿童</p>

                <!-- @click="getArry.amount='0.01'" :class="{'active':getArry.amount=='0.01'}" -->
            </div>
        </div>
        <div class="save" @click="addInforNow()">保存</div>
    </div>
</template>

<script>
import http from "@/assets/js/axios";
import httpr from "@/assets/js/axiosr";
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import { Toast } from 'mint-ui';
export default {
    data() {
        return {
            isAshow: false,
            isBshow: false,
            isCshow: false,
            userToken: '',
            queryParam: {
                contactAddress: "",
                id: 0,
                idCardNum: "",
                passPortNum: "",
                phoneNum: "",
                postcode: "",
                touristName: "",
                touristType: 'adult'
            }
        }
    },
    components: {

    },
    mounted() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        // if (!this.userToken) {
        //     this.$router.push('/index')
        // }
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        addInforNow: async function () {
            if (this.queryParam.touristName && this.queryParam.phoneNum && this.queryParam.idCardNum) {
                if (!/[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/.test(this.queryParam.touristName)) {
                    Toast({ message: "姓名格式格式不正确！", duration: 1000 })
                } else if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.queryParam.phoneNum)) {
                    Toast({ message: "手机号码格式格式不正确！", duration: 1000 })
                } else if (!/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(this.queryParam.idCardNum)) {
                    Toast({ message: "身份证格式格式不正确！", duration: 1000 })
                } else {
                    const res = await httpr.post('user_tourist/add_new?token=' + this.userToken, this.queryParam)
                    // console.log(res);
                    if (res.data.code == 100) {
                        Toast({ message: res.data.message, duration: 1000 })
                        this.$router.go(-1)
                    } else {
                        Toast({ message: res.data.message, duration: 1000 })
                    }
                }
            } else {
                Toast({ message: "请把必填数据填写完整，再提交！", duration: 1000 })
            }
        },
        // 姓名验证
        nameBlur: async function () {
            // console.log(888);


            const _this = this
            if (_this.queryParam.touristName) {
                _this.usernameTips = false;
                if (!/[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/.test(_this.queryParam.touristName)) {
                    Toast({ message: "姓名格式格式不正确！", duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        // 电话号码验证
        phoneBlur: async function () {
            const _this = this
            if (_this.queryParam.phoneNum) {
                _this.usernameTips = false;
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(_this.queryParam.phoneNum)) {
                    Toast({ message: "手机号码格式格式不正确！", duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        // 身份证号码验证
        idCardBlur: async function () {
            const _this = this
            if (_this.queryParam.idCardNum) {
                _this.usernameTips = false;
                if (!/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/.test(_this.queryParam.idCardNum)) {
                    Toast({ message: "身份证格式格式不正确！", duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },

    }
}
</script>

<style lang="stylus" scoped>
.add-order {
    height: 100%;
    background-color: #f0f0f0;

    .tles {
        padding: 0 12px;
        width: 100%;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
    }

    .ltst {
        width: 100%;
        padding: 0 15px;
        background-color: #fff;

        ul {
            li {
                width: 100%;
                height: 44px;
                line-height: 44px;
                font-size: 16px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                color: rgba(153, 153, 153, 1);
                border-bottom: 1px solid #f0f0f0;

                input {
                    margin-top: 8px;
                    text-align: right;
                    height: 30px;
                    line-height: 30px;
                    font-size: 16px;
                    display: inline-block;
                    width: 250px;
                    float: right;
                }
            }
        }

        .type {
            margin-top: 20px;
            margin-left: 40px;
            padding-bottom: 20px;

            p {
                margin-left: 20px;
                font-size: 16px;
                height: 40px;
                line-height: 40px;
                width: 100px;
                text-align: center;
                border: 1px solid #999;
                border-radius: 10px;
            }

            .currt {
                background-color: rgba(194, 223, 90, 1);
                color: #fff;
                border: 1px solid rgba(194, 223, 90, 1);
            }
        }
    }

    .save {
        margin: 0 auto;
        margin-top: 40px;
        width: 330px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background: rgba(194, 223, 90, 1);
        border-radius: 5px;
        font-size: 18px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
}
</style>
